<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="../js/wap_meta.js" ></script>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.1.js" ></script>
		<link rel="stylesheet" href="../css/base.css" />
		<script type="text/javascript" src="../js/link.js" ></script>
		<script type="text/javascript" src="../js/jquery.cookie.js" ></script>
		<script type="text/javascript" src="../js/id.js" ></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			font-family: "微软雅黑";
		}
		
		body {
			background: #f0f0f0;
		}
		.title p{
			width: 750px;
			text-align: center;
			font-size: 34px;
			color: #004591;
			padding-top: 26px;
		}
		.back{
			position: absolute;
			top: 30px;
			left: 30px;
		}
		.littleTitle{
			position: absolute;
			width: 750px;
			text-align: center;
			top: 130px;
			font-size: 32px;
			color: #0b52a1;
		}
		.content{
			position: absolute;
			top: 200px;
			padding-bottom: 100px;
			width: 750px;
		}
		.bar{
			position: relative;
			height: 90px;
		}
		.bar p{
			padding-top: 15px;
			padding-left: 30px;
			font-size: 32px;
			color: #333333;
		}
		.right{
			position: absolute;
			left: 240px;
			top: 15px;
		}
		.right input{
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
			width: 500px;
		}
		.line{
			position: absolute;
			left: 30px;
			width: 720px;
			top: 78px;
			height: 1px;
			background: #d0d0d0;
		}
		.comform{
			position: absolute;
			left: 30px;
			bottom: 100px;
		}
		.sanjiao{
			position: absolute;
			left: 680px;
			top: 30px;
		}
		select{
			width: 510px;
			height: 44px;
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
		}
		
		.right1{
			position: absolute;
			left: 240px;
			top: 15px;
			width: 500px;
		}
		.right1 div{
			float: left;
			padding-right: 60px;
			padding-top: 4px;
		}
		.right1 div input{
			font-size: 32px;
			color: #999999;
		}
		
		
		.right2{
			position: absolute;
			left: 240px;
			top: 15px;
			width: 440px;
			padding-bottom: 100px;
		}
		.right2 div{
			float: left;
			padding-right: 60px;
			padding-top: 4px;
			padding-bottom: 21px;
			width: 440px;
		}
		.right2 div input{
			font-size: 32px;
			color: #999999;
		}
		input[type="date"] {
			height: 40px;
			width: 510px;
		}
		
		input[type="radio"] {
			margin: 3px 3px 0px 5px;
			display: none;
			height: 360px;
			width: 360px;
		}
		label {
			font-size: 27px;
			color: #333333;
			height: 32px;
			position: relative;
			padding-left: 40px;
			/*padding-top: -4px;*/
			/*padding-bottom: 7px;*/
			cursor: pointer;
			background: url(../img/apply/select.png) no-repeat left bottom;
		}
		label.checked {
			background-position: left top;
		}
	</style>
	<body>
		<div class="title">
			<p>公益护照申领</p>
			<img class="back" src="../img/activate/back.png" />
		</div>
		<div class="littleTitle">身份认证</div>
		<div class="content">
			<form id="searchForm">
				<div class="bar">
					<div class="left">
						<p>姓名<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="name" type="text" placeholder="请输入姓名">
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>证件类型<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="cardType">
                            <option selected value="0">身份证</option>
                            <option value="1">军官证</option>
                            <option value="2">护照</option>
                        </select>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>证件号码<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input id="card_no" name="card_no" type="text" placeholder="请输入证件号码" >
					</div>
					<div class="line"></div>
				</div>
				<div class="bar" id="birth">
					<div class="left">
						<p>出生日期<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="date" placeholder="请选择出生日期" type="text" onfocus="(this.type='date')"  >
					</div>
					<div class="line"></div>
				</div>
				<div class="bar" id="sex">
					<div class="left">
						<p>性别<font color='#FF3939'>*</font></p>
					</div>
					<div class="right1">
						<div>
							<input class="sexinput" type="radio" id="男" checked="checked" name="sex" value="男">
							<label name="男" class="sexs checked" for="男">男</label>
						</div>
						<div>
							<input class="sexinput" type="radio" id="女" name="sex" value="女">
							<label name="女" class="sexs" for="女">女</label>
						</div>
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>申请类别<font color='#FF3939'>*</font></p>
					</div>
					<img class="sanjiao" src="../img/apply/sanjiao.png" />
					<div class="right">
                        <select id="reasonType">
                            <option selected value="0">首次申领</option>
                            <option value="1">换发护照</option>
                            <option value="2">补发护照</option>
                        </select>
					</div>
					<div class="line"></div>
				</div>
				
				<div class="bar" id="reasonBar">
					<div class="left">
						<p>原因<font color='#FF3939'>*</font></p>
					</div>
					<div class="right2" id="reason">
						<div>
						  <input class="reasonInput" type="radio" id="rune" checked="checked" name="reason" value="rune">
						  <label name="rune" class="reason checked" for="rune">原护照丢失</label>
						</div>
						<div>
						  <input class="reasonInput" type="radio" id="lost" name="reason" value="lost">
						  <label name="lost" class="reason" for="lost">原护照被盗或损毁</label>
						</div>
					</div>
				</div>
			</form>
		</div>
		<img class="comform" src="../img/activate/next.png" />
		<script>
			$("#birth").hide();
			$("#sex").hide();
			$("#reasonBar").hide();
			
			
			$('.sexs').click(function() {
				var radioId = $(this).attr('name');
				$('.sexs').removeClass('checked') && $(this).addClass('checked');
				$('.sexinput').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
			});
			
			
			$(".comform").click(function(){
				if($("#searchForm [name='name']").val() == ""){
					alert("请输入姓名");
					return;
				}
				if(!checkCard()){
					return;
				}
				if($("#cardType").children('option:selected').val() != "CID") {
					if($("#searchForm [name='date']").val() == ""){
						alert("请选择出生日期");
						return;
					}
				}
				
				var obj = new Object();
				obj.name = $("#searchForm [name='name']").val();
				obj.cardType = $("#cardType").children('option:selected').val();
				obj.cardNO = $("#searchForm [name='card_no']").val();
				obj.applyType = $("#reasonType").children('option:selected').val();
				
				if($("#birth").css("display") == "block"){
					obj.birthday = $("#searchForm [name='date']").val().replace(/-/g,"");
				}else{
					obj.birthday = getBirthday(document.getElementById('card_no').value);
				}
				if($("#sex").css("display") == "block"){
					obj.sex = $("#searchForm [name='sex']").attr("id");
				}else{
					obj.sex = checkSex(document.getElementById('card_no').value);
				}
				if($("#reasonBar").css("display") == "block"){
					obj.applyCase = $("#searchForm [name='reason']").attr("id").replace("reason","");
				}
				
				obj.step = 1;
				obj.sn = $.cookie("sn");
				
				$.ajax({
					url: linkObj.apply,
					type: "post",
			        dataType : 'json',  
					data: JSON.stringify(obj),
        			contentType: "application/json",
					success: function(data) {
						if(data.code == 0) {
//							alert(data.message)
							if(checkBirthday(document.getElementById('card_no').value) >= 18){
								if(obj.applyType==0){
							    	document.location = "number.html";
                                }else{
                                    document.location = "appointment.html";
								}
							}else{
								document.location = "parent.html";
							}
						} else {
							alert(data.message)
						}
					}
				});
			})
			$(".back").click(function(){
				javascript:history.go(-1);
			})

			$('#cardType').change(function() {
				if($(this).children('option:selected').val() == "CID") {
					$("#birth").hide();
					$("#sex").hide();
				} else {
					$("#birth").show();
					$("#sex").show();
				}
			})
			$('#reasonType').change(function() {
				if($(this).children('option:selected').val() == "10") {
					$("#reasonBar").hide();
				} else {
					$("#reasonBar").show();
				}
			})
//			获取证件类型
			$.get(linkObj.cardType,function(data){
				if(data.code == 0){
					$("#cardType").empty();
					for (var ci = 0; ci < data.data.length; ci++) {
						var option = $("<option>").val(data.data[ci].code).text(data.data[ci].name);
						$("#cardType").append(option);
					}
				}
			},'json')
//			获取申请类别
			$.get(linkObj.applyType,function(data){
				if(data.code == 0){
					$("#reasonType").empty();
					for (var ci = 0; ci < data.data.applyTypeMap.length; ci++) {
						var option = $("<option>").val(data.data.applyTypeMap[ci].code).text(data.data.applyTypeMap[ci].name);
						$("#reasonType").append(option);
					}
					$("#reason").empty();
					for(var ci = 0; ci < data.data.applyCaseMap.length; ci++) {
						var str = "";
						str += "<div><input class='reasonInput' type='radio' id='reason" + data.data.applyCaseMap[ci].code + "'";
						if(ci == 0) {
							str += " checked='checked' ";
						}
					
						str += "name='reason' value='reason" + data.data.applyCaseMap[ci].code + "'>"
					
						str += "<label onclick='reasonclick(this)' name='reason" + data.data.applyCaseMap[ci].code + "' class='reason "
					
						if(ci == 0) {
							str += "checked";
						}
						str += "' for='reason" + data.data.applyCaseMap[ci].code + "'>" + data.data.applyCaseMap[ci].name + "</label></div>"
						$("#reason").append(str);
					}
				}
			},'json')
			
			function reasonclick(a){
				var radioId = $(a).attr('name');
				$('.reason').removeClass('checked') && $(a).addClass('checked');
				$('.reasonInput').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
			}
		</script>
	</body>
</html>
